<!--
 * @Descripttion: 积分信息
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-20 14:39:20
 * @LastEditTime: 2022-04-06 10:30:20
-->
<template>
  <div class="appeal-detail">
    <!--积分信息-->
    <div class="header">
      <div class="header-content flex flex-horizontal-between">
        <ul class="flex flex-wrap flex-horizontal-between">
          <li v-for="(item,index) in msgList" :key="index"
            :class="['flex','flex-vertical-center',{'width-100':item.key=='officeName'}]">
            <div v-if="item.key!='officeName'" class="flex">
              <p>{{item.name}}:</p>
              <p>{{detailMsg.appealUserInfo[item.key]}}</p>
            </div>
            <div v-else class="flex flex-vertical-center" style="min-width:100px;">
              <p>
                {{detailMsg.appealUserInfo['companyName']}}<span v-if="detailMsg.appealUserInfo['buildingName']">-{{detailMsg.appealUserInfo['buildingName']}}</span>
              </p>
            </div>
          </li>
        </ul>
        <div class="appeal-status flex flex-vertical-center">
          <p>{{detailMsg.appealUserInfo.appealState}}</p>
          <div class="flex" v-if="examineFlag">
            <Button type="primary" style="margin-left:20px" @click="examineFun(2)">不通过</Button>
            <Button type="primary" style="margin-left:20px" @click="examineFun(1)">通过</Button>
          </div>
        </div>
      </div>
      <!--审核-->
      <dt-modal-edit ref="examineEdit" title="请进行审核" @ok="submitExamine">
        <div v-if="examineForm.auditResultFlag==1" class="tips">
          <p>确定通过申诉？</p>
          <p>通过后将消除“0分记录”</p>
        </div>
      </dt-modal-edit>
    </div>
    <div class="appeal-content" ref="appealContent">
      <Tabs type="card" v-model="showTab">
        <TabPane label="申诉原因" name="appealReason">
          <div v-html="detailMsg.appealReason.appealReason" class="reason-border">
          </div>
          <div class="reason-border" v-if="detailMsg.appealReason.appealAnnex!=''">
            <div v-for="(item,index) in detailMsg.appealReason.appealAnnex.split(',')"
              :key="index" class="small-img hand position-relative"
              :style="{'width':'100px','height':'100px'}">
              <img :src="item" class="img-show width-100 height-100">
              <div class="list-cover flex flex-vertical-center">
                <Icon type="ios-eye-outline" :size="22" @click.native="preViewImgFun(index)">
                </Icon>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane label="扣分明细" name="sellDetail">
          <ul class="flex sell-total">
            <li>0分日期：{{detailMsg.deductionDetail.zeroScoreDate}}</li>
            <li>最终积分：{{detailMsg.deductionDetail.finalScore}}分</li>
          </ul>
          <detail-list ref="detailList" :list="sellList">
          </detail-list>
        </TabPane>
        <TabPane label="审核记录" name="examineLog">
          <examine-log ref="examineLog" :lineData="detailMsg.appealNodeList"></examine-log>
        </TabPane>
      </Tabs>
    </div>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage">
    </preview-image>
  </div>
</template>
<script>
  import detailList from './components/detailList.vue'
  import examineLog from './components/examineLog.vue'
  import ruleOpt from '@/biz/option/rule.js'
  import integralMgr from '@/biz/buildingHome/integral'

  export default {
    components: {},
    data() {
      return {
        preViewImg: [],
        showIndex: 0,
        examineFlag: false,
        showTab: 'appealReason',
        detailMsg: {
          appealNodeList: [],
          appealReason: {
            appealReason: '',
            appealAnnex: ''
          },
          appealUserInfo: {},
          deductionDetail: {
            finalScore: 0,
            scoreDetailList: [],
            zeroScoreDate: ''
          }
        },
        msgList: [{
          name: '',
          key: 'officeName',
        },
        {
          name: '申诉人',
          key: 'appealName',
        },
        {
          name: '申诉角色',
          key: 'appealRole',
        },
        {
          name: '申诉时间',
          key: 'appealDate',
        }],
        options: [{
          title: '驳回原因',
          key: 'auditReason',
          input: {
            type: 'textarea',
            autosize: {
              minRows: 4
            },
            maxlength: 300,
            showWordLimit: true
          },
          rules: [
            ruleOpt.required('驳回原因不能为空'),
          ]
        }],
        examineForm: {
          auditResultFlag: 1, // 2驳回 1通过
          auditReason: ''
        },
        sellList: []
      }
    },
    watch: {},
    components: {
      detailList,
      examineLog
    },
    created() {
      let detailParams = this.$route.query

      this.businessId = detailParams.businessId

      this.auditId = detailParams.auditId

      this.getDetailInfo()
    },
    mounted() {},
    methods: {
      async getDetailInfo() {
        if(this.auditId){
          await this.getIsAuditAuth()
        }
   
        let params = {
          id: this.businessId
        }
        integralMgr.getAppealDetail(params)
          .then((res) => {
            this.detailMsg = { ...res }

            res.deductionDetail.scoreDetailList.map((item) => {
              item.score = item.scoreStatus == 2 ? '申诉成功' : item.score
              Object.assign(item, item.detail)
            })

            let arrRecords = this.resolveArrFun(res.deductionDetail.scoreDetailList, [
              'actionDate'
            ])

            this.sellList = [...arrRecords]
          })
          .catch((err) => {})
      },
      resolveArrFun(data, keys = []) {
        //keys可以传一个数组
        var c = []
        var d = {}
        for (var element of data) {
          let element_keyStr = ''
          let element_key = []
          let element_keyObj = {}
          for (var key of keys) {
            element_key.push(element[key])
            element_keyObj[key] = element[key]
          }
          element_keyStr = element_key.join('_')
          if (!d[element_keyStr]) {
            c.push({
              ...element_keyObj,
              children: [element],
            })
            d[element_keyStr] = element
          } else {
            for (var ele of c) {
              let isTrue = keys.some((key) => {
                return ele[key] != element[key]
              })
              if (!isTrue) {
                ele.children.push(element)
              }
            }
          }
        }
        return c
      },
      preViewImgFun(index) {
        this.preViewImg = this.detailMsg.appealReason.appealAnnex.split(',')
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      getIsAuditAuth() {
        let params = {
          id: this.auditId
        }
        return integralMgr.getIsAuditAuth(params)
          .then((res) => {
            this.examineFlag = res
          })
          .catch((err) => {})
      },
      // 提交审批
      submitExamine() {
        let params = {
          ...this.examineForm,
          auditId: this.auditId
        }
        integralMgr.submitAudit(params)
          .then((res) => {
            this.$refs.examineEdit.hide()
            this.getDetailInfo()
          })
          .catch((err) => {})
      },
      examineFun(type) {
        this.examineForm.auditResultFlag = type
        if (type == 1) {
          this.$refs.examineEdit.show()
        } else {
          this.$refs.examineEdit.show(this.options, this.examineForm)
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
  .appeal-detail {
    padding: 20px;
    font-size: 16px;

    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .header {
      padding: 10px 40px;
      width: 100%;
      background-color: #f2f2f2;

      .header-content {
        height: 120px;
        width: 100%;
        background-color: #f2f2f2;
        font-size: 18px;
      }

      .appeal-img {
        width: 30px;
        color: #0f42a7;
        font-size: 24px;
      }

      .appeal-status {
        padding-left: 5%;
        width: 35%;
        border-left: 1px solid #d7d7d7;
        font-size: 24px;
      }
    }

    .appeal-content {
      margin-top: 30px;

      .reason-border {
        width: 80%;
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #d7d7d7;
      }

      .img-show {
        margin-right: 20px;
        width: 100px;
        height: 100px;
      }

      .sell-total {
        li {
          width: 200px;
          padding: 10px 20px;
          border: 1px solid #d7d7d7;
          text-align: center;
        }

        li:first-child {
          border-right: 0;
        }
      }
    }

    .tips {
      p {
        font-size: 18px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
</style>